<template>
  <div>
    x轴：{{ mouse.x }}=={{ x }}
    <br />
    y轴：{{ mouse.y }}=={{ y }}
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
export default {
  setup() {
    /* 1-定义数据 */
    const mouse = reactive({
      x: 0,
      y: 0
    })

    /* 2-监听鼠标移动事件 */
    // dom.onmousemove=function name(params) {

    // }
    var newMouse = toRefs(mouse)
    onMounted(() => {
      window.addEventListener('mousemove', (e) => {
        // console.log(e.screenX,e.screenY,'===screen');
        // console.log(e.clientX,e.clientY,'===client');
        // console.log(e.pageX,e.pageY,'====page');
        // mouse.x=e.pageX
        // mouse.y=e.pageY
        newMouse.x.value = e.pageX
        newMouse.y.value = e.pageY
      })
    })
    return { mouse, ...newMouse }
  }
}
</script>

<style lang="scss" scoped></style>
